<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <link rel="stylesheet" href="/css/vant.css">
    <script src="/js/vant.min.js"></script>
</head>
<body>
<div id="app">
    <button v-on:click="showSku">显示</button>
    <van-sku
            v-model="showBase"
            v-bind:sku="sku"
            v-bind:goods="goods"
            v-bind:goods-id="goodsId"
            v-bind:hide-stock="sku.hide_stock"
            v-bind:quota="quota"
            v-bind:quota-used="quotaUsed"
            v-on:buy-clicked="onBuyClicked"
            v-on:add-cart="onAddCartClicked"
    />
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            showBase: false,
            goodsId: '40289f5e699fc2850169a327cb06002b',
            quota: 0, // 限购数量
            quotaUsed: 0, // 已购买数量
            sku: {
                // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
                // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
                tree: [
                    {
                        k: '颜色', // skuKeyName：规格类目名称
                        v: [
                            {
                                id: '1', // skuValueId：规格值 id
                                name: '红色', // skuValueName：规格值名称
                                imgUrl: 'https://img.yzcdn.cn/1.jpg' // 规格类目图片，只有第一个规格类目可以定义图片
                            },
                            {
                                id: '2',
                                name: '蓝色',
                                imgUrl: 'https://img.yzcdn.cn/2.jpg'
                            }
                        ],
                        k_s: 's1' // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
                    },
                    {
                        k: '尺码', // skuKeyName：规格类目名称
                        v: [
                            {
                                id: '3', // skuValueId：规格值 id
                                name: 'S', // skuValueName：规格值名称
                                imgUrl: 'https://img.yzcdn.cn/1.jpg' // 规格类目图片，只有第一个规格类目可以定义图片
                            },
                            {
                                id: '4',
                                name: 'M',
                                imgUrl: 'https://img.yzcdn.cn/2.jpg'
                            }
                        ],
                        k_s: 's2' // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
                    }
                ],
                // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
                list: [
                    {
                        id: 2259, // skuId，下单时后端需要
                        price: 100, // 价格（单位分）
                        s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
                        s2: '3', // 规格类目 k_s 为 s2 的对应规格值 id
                        s3: '0', // 最多包含3个规格值，为0表示不存在该规格
                        stock_num: 110 // 当前 sku 组合对应的库存
                    },{
                        id: 30349, // skuId，下单时后端需要
                        price: 100, // 价格（单位分）
                        s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
                        s2: '4', // 规格类目 k_s 为 s2 的对应规格值 id
                        s3: '0', // 最多包含3个规格值，为0表示不存在该规格
                        stock_num: 110 // 当前 sku 组合对应的库存
                    },{
                        id: 30350, // skuId，下单时后端需要
                        price: 100, // 价格（单位分）
                        s1: '2', // 规格类目 k_s 为 s1 的对应规格值 id
                        s2: '3', // 规格类目 k_s 为 s2 的对应规格值 id
                        s3: '0', // 最多包含3个规格值，为0表示不存在该规格
                        stock_num: 110 // 当前 sku 组合对应的库存
                    },{
                        id: 1216, // skuId，下单时后端需要
                        price: 100, // 价格（单位分）
                        s1: '2', // 规格类目 k_s 为 s1 的对应规格值 id
                        s2: '4', // 规格类目 k_s 为 s2 的对应规格值 id
                        s3: '0', // 最多包含3个规格值，为0表示不存在该规格
                        stock_num: 110 // 当前 sku 组合对应的库存
                    }
                ],
                price: '1.00', // 默认价格（单位元）
                stock_num: 227, // 商品总库存
                collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
                none_sku: false, // 是否无规格商品
                hide_stock: false // 是否隐藏剩余库存
            },
            goods: {
                // 商品标题
                title: '测试商品',
                // 默认商品 sku 缩略图
                picture: 'https://img.yzcdn.cn/1.jpg'
            },
            customStepperConfig: {
                // 自定义限购文案
                quotaText: '每次限购xxx件',
                // 自定义步进器超过限制时的回调
                handleOverLimit: (data) => {
                    const { action, limitType, quota, quotaUsed } = data;

                    if (action === 'minus') {
                        Toast('至少选择一件商品');
                    } else if (action === 'plus') {
                        // const { LIMIT_TYPE } = Sku.skuConstants;
                        if (limitType === LIMIT_TYPE.QUOTA_LIMIT) {
                            let msg = `单次限购${quota}件`;
                            if (quotaUsed > 0) msg += `，你已购买${quotaUsed}`;
                            Toast(msg);
                        } else {
                            Toast('库存不够了');
                        }
                    }
                }
            },
            skuData: {
                // 商品 id
                goodsId: '946755',
                // 留言信息
                messages: {
                    message_0: '12',
                    message_1: ''
                },
                // 另一种格式的留言，key 不同
                cartMessages: {
                    '留言1': 'xxxx'
                },
                // 选择的商品数量
                selectedNum: 1,
                // 选择的 sku 组合
                selectedSkuComb: {
                    id: 2257,
                    price: 100,
                    s1: '30349',
                    s2: '1193',
                    s3: '0',
                    stock_num: 111
                }
            }
        },
        mounted: function () {
            this.goodsId = this.getQueryString('id')
            // 获取商品信息
            axios.get('/api/shop/goods/get/' + this.goodsId).then(function (res) {
                const data = res.data;
                app.goods.title = data.title
                app.goods.picture = data.img
                app.sku.price = data.price
                app.sku.stock_num = data.stock
                var tree = []
                // 规格对应组
                var stemp = 1
                for (let i = 0; i < data.norm.length; i++) {
                    var v = []
                    while (i+1 < data.norm.length && data.norm[i].name === data.norm[i+1].name){
                        v.push({
                            id: data.norm[i].attr,
                            name: data.norm[i].attr,
                        })
                        i++
                    }
                    v.push({
                        id: data.norm[i].attr,
                        name: data.norm[i].attr,
                    })
                    tree.push({
                        k: data.norm[i].name, // skuKeyName：规格类目名称
                        v: v,
                        k_s: 's' + stemp++
                    })
                }
                app.sku.tree = tree
                var list = []
                for (let i = 0; i < data.normMultiplyList.length; i++) {
                    let s1 = '';
                    if (data.normMultiplyList[i].attrJson.split(',').length > 0)
                        s1 = data.normMultiplyList[i].attrJson.split(',')[0].split(':')[1]

                    let s2 = '';
                    if (data.normMultiplyList[i].attrJson.split(',').length > 1)
                        s2 = data.normMultiplyList[i].attrJson.split(',')[1].split(':')[1]
                    let s3 = '';
                    if (data.normMultiplyList[i].attrJson.split(',').length > 2 )
                        s3 = data.normMultiplyList[i].attrJson.split(',')[2].split(':')[1]
                    list.push({
                        id: data.normMultiplyList[i].id, // skuId，下单时后端需要
                        price: data.normMultiplyList[i].price*100, // 价格（单位分）
                        s1: s1, // 规格类目 k_s 为 s1 的对应规格值 id
                        s2: s2, // 规格类目 k_s 为 s2 的对应规格值 id
                        s3: s3, // 最多包含3个规格值，为0表示不存在该规格
                        stock_num: data.normMultiplyList[i].stock // 当前 sku 组合对应的库存
                    })

                }
                app.sku.list = list
            })
        },
        methods: {
            getQueryString :function (name) {
                let reg = `(^|&)${name}=([^&]*)(&|$)`
                let r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]); return null;
            },
            onBuyClicked: function () {
                console.log("购买")
            },
            onAddCartClicked: function () {
                console.log("添加到购物车")
            },
            showSku : function () {
                this.showBase = true
            }
        }
    })
</script>
</body>
</html>